<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div>
        <label class="col-sm-2 control-label">id:
            <input type="text" class="form-control " v-model="id"
                   placeholder="请输入id"></label>
        <label class="col-sm-2 control-label">名字
            <input type="text" class="form-control" v-model="name"
                   placeholder="名字" @keyup.f2="add"></label>
        <label class="col-sm-2 control-label">检索
            <!--            <input type="text" class="form-control" v-model="keyName"-->
            <!--                   placeholder="检索" @keyup.enter="add"></label>-->
            <input type="text" class="form-control" v-model="keyName"
                   placeholder="检索" v-focus></label>

        <button type="submit" class="btn btn-default"  @click="add">添加</button>


    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>Ctime</th>
            <th>oprtion</th>
        </tr>
        </thead>
        <tbody>
        <!--        普通渲染-->
        <!--<tr v-for="itme in list" :key="itme.id">
            <td>{{ itme.id }}</td>
            <td v-text="itme.name"></td>
            <td>{{itme.ctime}}</td>
            <td>
                <a href="" @click.prevent="rm(itme.id)">删除</a>
            </td>
        </tr>-->
        <tr v-for="itme in find(keyName)" :key="itme.id">
            <td>{{ itme.id }}</td>
            <!--            <td v-text="itme.name"></td>-->
            <td>{{ itme.name | nameFilter | nameFilter2("aaa")}}</td>
            <td>{{itme.ctime | dateFilt}}</td>
            <td>
                <a href="" @click.prevent="rm(itme.id)" v-color="'red'">删除</a>
            </td>
        </tr>

        </tbody>
    </table>

</div>

<script>
    /**   vue 的过滤器就是将数据进行过滤格式化为指定数据 只能在插值表达式和v-bind 中使用
     过滤器的测试使用方式：
     插值表达式 {{ name | nameFilter}}  nameFileter 就是name的 过滤器 创建在new Vue 之前创建
     全局定义方式  Vue.filter("过滤器名称",function (data){})
     私有过滤器的 就是new 中filters中创建 格式
     名字 ： function
     过滤器就近原则， 先调用私有的在调用的全局的（名字相同时）
     `` 模板字符串

     @keyup.enter 按键修饰符，当点击那个键就当触发这个件才会触发
     Vue.config.keyCodes.f2 = 113 自定义按键操作触发
     */

    Vue.filter('nameFilter', function (data) {

        return data + 123
    })
    Vue.filter('nameFilter2', function (data, msg) {

        return data + msg
    })
    Vue.filter('dateFilt', function (data) {
        var date = new Date(data)

        // return date.getFullYear() + "-" + date.getMonth() + 1 + "-" + date.getDate()
        var y = date.getFullYear()
        var m = date.getMonth()
        var d = date.getDate()

        return `${y}-${m}-${d}`
    })
    //自定义按键触发
    Vue.config.keyCodes.f2 = 113
    //自定义指令 参数一是执行的名字在制定名字的时候可以不需要加V-的前缀 但是调用参数的时候需要加上V-
    // 创建自定义 函数格式  Vue.directive('名字',{})
    // 官网文档https://cn.vuejs.org/v2/guide/custom-directive.html#ad
    Vue.directive('focus', {
        //初始化的时候 触发一次，加载到内存时候触发
        bind: function (el) {
            //el就是原生的domjs对象，可以使用原生的js方法

        },
        //当指定触发的时候触发添加指令 触发多一次，在页面渲染的时候触发
        inserted: function (el) {
            //只有dom元素插入指令的时候才会触发方法绑定
            el.focus()

        },
        // 数据更新的时候触发 触发多次
        update: function () {

        }
    })
    Vue.directive('color', {
        //写法一 传输参数值 但是必须 是"''"这样才能吧数据参数出入进来
       /* bind: function (el,{expression}){
            el.style.color = 'red'
            console.log(expression)
        },*/
        //写法二
        bind: function (el,binding){
            el.style.color = 'red'
            console.log(binding.expression)
        },
        inserted: function (){},
        update: function (){}
    })
    const vue = new Vue({
        el: "#app",
        data: {
            id: "",
            name: "",
            keyName: "",
            list: [
                {id: 1, name: "奔驰", ctime: new Date()},
                {id: 2, name: "宝马", ctime: new Date()}
            ]
        },
        methods: {
            add() {
                console.log("这是测试数据")
                this.list.push({id: this.id, name: this.name, ctime: new Date()})
                this.id = this.name = "";
            },
            rm(id) {

                /*this.list.some((itme,i)=>{
                    if(itme.id == id){
                        this.list.splice(i)
                        return true;
                    }
                })*/

                let number = this.list.findIndex(itme => {
                    if (itme.id == id) {
                        return true;
                    }
                });
                console.log(number)
                this.list.splice(number, 1)
            },
            find(keyName) {
                var newlist = []
                this.list.forEach((itme) => {
                    if (itme.name.indexOf(keyName) != -1) {
                        newlist.push(itme)
                    }
                })
                return newlist;

            }
        },
        //自定义过滤器
        filters: {
            dateToString: function (data) {
                console.log(data)
            }

        },
        //自定义指令
        directives:{
          "ceshi":{
              bind:{}
          }
        }

    });

</script>
</body>
</html>